<template>
    <div class="wrapper">
        <van-cell-group inset>
            <van-field v-model="phone" readonly label="手机号" placeholder="请输入用户名" />
            <van-field v-model="sms" center clearable label="短信验证码" placeholder="请输入短信验证码">
                <template #button>
                    <van-button size="small" color="#66d6ff" v-if="time === 0 && isOne" type="primary" @click="getLoseLoginPassSecurityCode">
                        发送验证码
                    </van-button>
                    <van-button size="small" v-if="time === 0 && !isOne" color="#66d6ff"  type="primary" @click="getLoseLoginPassSecurityCode">
                        发送验证码
                    </van-button>
                    <van-button size="small" v-if="time !== 0" type="primary" color="#66d6ff"  disabled>{{ time }} 重新获取</van-button>
                </template>
            </van-field>
        </van-cell-group>
        <div class="btn" @click="getSecurityCodeValid">确定</div>
    </div>
</template>

<script>
import { defineComponent } from 'vue'
import { checkSmsInfo, findByAgentNoBankInfo, sendSmsInfo } from '@/api/wallet'
import store from '@/store'
import { showToast } from 'vant'
import { checkMobile } from '@/utils/utils'
export default defineComponent({
    name: 'getCode',
    setup() {
        const route = useRoute()
        const router = useRouter()
        const state = reactive({
            phone: '',
            time: 0,
            isOne: true,
            interV: null,
            code: '',
            pay: null,
            userInfo: {},
            username: '',
            securityCode: '',
            sms: ''
        })
        findByAgentNoBankInfo().then(res => {
            state.phone = res.object.settleInfoBean.prePhone || store.state.user.userInfo.username
        })
        const getLoseLoginPassSecurityCode = () => {
            if (!state.phone && !checkMobile(state.phone)) {
                showToast('手机号识别异常，请联系运营人员')
                return
            }
            sendSmsInfo({
                username: state.phone
            }).then(res => {
                if (res.code == 200) {
                    showToast('验证码获取成功')
                    if (state.interV) clearInterval(state.interV)
                    state.time = 60
                    state.interV = setInterval(() => {
                        state.time = state.time - 1
                        if (state.time == 0) {
                            clearInterval(state.interV)
                            state.isOne = false
                        }
                    }, 1000)
                }
            })
        }
        const getSecurityCodeValid = () => {
            if (!state.sms) {
                showToast('请输入验证码')
                return
            }

            checkSmsInfo({
                username: state.phone,
                securityCode: state.sms,
                businessDesc: ''
            }).then(res => {
                if (res.code == 200) {
                    // if (route.query.pay == 1) {
                        router.push({
                            path: '/payPwd', // 设置支付密码
                            query: {
                                securityCode: state.sms,
                                username: state.phone
                            }
                        })
                }
            })
        }
        return {
            ...toRefs(state),
            getLoseLoginPassSecurityCode,
            getSecurityCodeValid
        }
    }
})
</script>

<style scoped lang="scss">
.wrapper {
    padding: 10px 0;
    .btn {
        width: 150px;
        height: 40px;
        background: #66d6ff;
        opacity: 1;
        border-radius: 6px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        margin: 50px auto;
    }
}
</style>
